<template>
	<div class="containerAll">
		<x-header :right-options="{showMore: true}" :left-options="{backText: ''}" @on-click-more="showMenus = true">确认订单</x-header>
		<flexbox class='addressHeight'>
			<flexbox-item :span='2'>
				<img :src="addressIconSrc" class="iconAddress"/>
			</flexbox-item>
			<flexbox-item :span='8'>
				<div class="addressTitle"><span>郁冰</span><span>13795212199</span></div>
				<div class="addressText"><span>上海上海市徐汇区凯滨路206号 B座10楼</span></div>
			</flexbox-item>
			<flexbox-item :span='2'><x-icon type="ios-arrow-right" size="30"></x-icon></flexbox-item>
		</flexbox>
		<div>
			<popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" ></popup-picker>
			<template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
	          <span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
	            <span class="demo-icon demo-icon-big" style="font-size:20px;vertical-align:middle;"></span>
	            <span style="vertical-align:middle;">手机</span>
	          </span>
	        </template>
		</div>
	</div>
</template>
<script>
	import { GroupTitle, Group, Cell, XHeader, Flexbox, FlexboxItem, XImg, PopupPicker, Picker } from 'vux'

	export default {
		components: {
	      Group,
	      GroupTitle,
	      Cell,
	      XHeader,
	      Flexbox, 
	      FlexboxItem,
	      XImg,
	      PopupPicker,
	      Picker
	    },
	    created(){
	      document.title = '新手有礼';
	    },
	    methods: {
	    	onChange (val) {
		      console.log('val change', val)
		    },
		    onChange (val) {
		      console.log('val change', val)
		    },
		    onShow () {
			  console.log('on show')
			},
			onHide (type) {
			  console.log('on hide', type)
			}
	    },
	    data () {
	      return {
	      	title1: '手机机型',
	      	list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
	      	value1: ['iPhone'],
	        addressIconSrc: require('../../../assets/imgs/addr_default.png'),
	        goodsImg: require('../../../assets/imgs/001.png')
	      }
	    }
	}
</script>	
<style lang="less" rel="stylesheet/less"  scoped="scoped">
	.addressHeight {
		height: 1rem;
		text-align: center!important;
		.iconAddress {
			height:.5rem;
		}
		.addressTitle{
			font-size: .3rem;
			text-align: left;
			span:first-child {
				margin-right: .2rem;
			}
			span {
				color: #464646;
			}
		}
		.addressText {
			text-align: left;
			font-size: .25rem;
			color:#909090;
		}
		.picker-buttons {
		  margin: 0 15px;
		}
	}
</style>